<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <div class="banners-container" v-cloak>
        <empty v-if="isEmpty">没有图片，请先上传</empty>
        <el-carousel :interval="interval" :height="heightValue" :width="imageWidth" v-else>
            <el-carousel-item v-for="(item, index) in items" :key="index" :style="{ height: heightValue }">
                <div class="img-outer">
                    <el-image :src="item.url" :style="{
                        height: heightValue,
                        borderRadius: imageRadius,
                        width: imageWidth,
                        'object-fit': 'fill',
                    }" />
                </div>
            </el-carousel-item>
        </el-carousel>
    </div>
</template>

<script>
import Empty from "./Base/Empty";
export default {
    components: {
        Empty,
    },
    data () {
        return {
            loading: false,
        };
    },
    props: {
        module: { type: Object },
    },

    watch: {},

    mounted: function () { },

    computed: {
        imageWidth: function () {
            // 图片的宽度
            var v = this.module.data.imageWidth;
            if (!v) {
                return "100%";
            }
            return v + "px";
        },

        interval: function () {
            var v = this.module.data.interval
            if (!v || v <= 0) {
                return 1500
            }
            return v * 1000
        },

        imageRadius: function () {
            // 图片的宽度
            var v = this.module.data.imageRadius || 0;
            if (!v) {
                return "0px";
            }
            return v + "px";
        },

        // 高度不能设置到module-box得body上，因为高度是由内部组件得实际高度决定的
        heightValue: function () {
            var h = this.module.height;
            if (!h) {
                return "auto";
            }
            return h.value + "px";
        },
        items: function () {
            return this.module.items;
        },
        isEmpty: function () {
            return this.module.items.length == 0;
        },
    },

    methods: {},
};
</script>

<style scoped>
.banners-container {
    height: 100%;
    margin: 0 auto;
}

.img-outer {
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>
